<template>
		<div>
				<el-row>
						<el-col :span="16">
								<el-input placeholder="请输入英文角色名" style="width: 35%;margin-right: 1%" v-model="roleForm.name"
								>
										<template slot="prepend">ROLE_</template>
								</el-input>
								<el-input placeholder="请输入中文角色名" style="width: 40%;margin-right: 1%" v-model="roleForm.namezh"
																		prefix-icon="el-icon-plus">
								</el-input>
								<el-button type="primary" style="width: 10%" icon="el-icon-plus" @click="saveRole">添加</el-button>
						</el-col>
				</el-row>
				<el-row style="margin-top: 15px">
						<el-collapse accordion @change="collapseChange" v-model="activeId">
								<el-collapse-item v-for="(item,index) in roleData" :title="item.namezh" :name="item.id" :key="index">
										<el-card class="box-card" v-loading="treeLoad">
												<div slot="header" class="clearfix">
														<span>可访问的资源</span>
														<el-button style="float: right; padding: 3px 0" type="danger" icon="el-icon-delete"
																									@click="deleteRole(item)">删除
														</el-button>
												</div>
												<div>
														<el-tree node-key="id"
																							ref="tree"
																							:key="index"
																							:default-checked-keys="checkedMenus"
																							:show-checkbox="true"
																							:data="menuData"
																							:props="menuTreeProps"
														></el-tree>
														<el-col style="display: flex;justify-content: flex-end">
																<el-button type="info" size="mini" @click="activeId = ''">取消修改</el-button>
																<el-button type="primary" size="mini" @click="updateMenuWithRole(item.id,index)">确认修改</el-button>
														</el-col>
												</div>
										</el-card>
								</el-collapse-item>
						</el-collapse>
				</el-row>
		</div>
</template>

<script>
export default {
		name: "AuthorityManger",
		data() {
				return {
						roleForm: {
								'id': '',
								'name': '',
								'namezh': ''
						},
						activeId: '',
						roleData: [],
						menuData: [],
						checkedMenus: [],
						menuTreeProps: {
								children: 'children',
								label: 'name'
						},
						treeLoad: false
				}
		},
		mounted() {
				this.init();
		},
		methods: {
				init() {
						this.listAllRoles();
				},
				// 获取所有的角色
				listAllRoles() {
						this.$get("/system/basic/role/listAllRoles").then(res => {
								const {data} = res;
								this.roleData = data;
						});
				},

				// 手风琴chang事件
				collapseChange(roleId) {
						this.menuData = []
						this.checkedMenus = []
						if (roleId) {
								this.treeLoad = true;
								this.listAllMenus();
								this.listCheckedMenus(roleId).then(res => {
										setTimeout(() => {
												this.treeLoad = false
										}, 200)
								})
						}
				},
				// 获取所有的菜单
				listAllMenus() {
						this.$get("/system/basic/role/listAllMenus").then(res => {
								const {data} = res;
								this.menuData = data;
						});
				},

				// 获取当前角色对应的menus
				listCheckedMenus(roleId) {
						return new Promise(((resolve, reject) => {
								this.$get(`/system/basic/role/listCheckedMenus/${roleId}`).then(res => {
										const {data} = res;
										this.checkedMenus = data;
										resolve()
								})
						}))
				},
				// 修改角色和权限的关系
				updateMenuWithRole(roleId, index) {
						let tree = this.$refs.tree[index];
						let menuIds = tree.getCheckedKeys(tree)
						const data = {
								roleId,
								menuIds
						}
						this.$put('/system/basic/role/updateMenuWithRole/', data).then(res => {
						})
				},

				// 添加角色
				saveRole() {
						this.$post("/system/basic/role/saveRole", this.roleForm).then(res => {
								const {code} = res
								debugger
								if (code === 200) {
										this.listAllRoles()
										this.roleForm = {
												'id': '',
												'name': '',
												'namezh': ''
										}
								}
						})
				},

				// 删除角色数据
				deleteRole(role) {
						this.$confirm(`是否确认删除【${role.namezh}】`, '提示').then(res => {
								this.$del('/system/basic/role/deleteRole', role.id).then(res => {
										const {code} = res
										if (code === 200) {
												this.listAllRoles()
										}
								})
						}).catch(error => {
								this.$message.info("取消删除")
						})
				}
		},
}
</script>

<style scoped>

</style>
